import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxRuntime: 'automatic',
      jsxImportSource: 'react',
      babel: {
        plugins: [
          ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }]
        ]
      }
    }),
    // PWA插件配置
    VitePWA({
      mode: 'production',  // 仅在生产环境生效
      registerType: 'autoUpdate',  // 自动更新
      strategies: 'generateSW', // 生成模式
      workbox: {
        globPatterns: ['**/*.{html,js,css,png,svg}'], // 预缓存所有静态资源
        // 自定义路由配置
        runtimeCaching: [
          // 1. 缓存API数据
          {
            urlPattern: ({ url }) =>
              url.pathname.startsWith('/api/image/get-image-list'),
            handler: 'NetworkFirst',
            options: {
              cacheName: 'quick-canvas-api-cache',
              cacheableResponse: {
                statuses: [200, 304] // 仅缓存成功响应
              },
              expiration: {
                maxAgeSeconds: 24 * 60 * 60, // 1天
                maxEntries: 50, // 最多缓存50条
                purgeOnQuotaError: true
              }
            }
          },
          // 2. 缓存图片资源
          {
            urlPattern: ({ url }) =>
              url.origin === 'http://localhost:3333' &&
              url.pathname.startsWith('/canvas-images/') &&
              url.pathname.endsWith('.png'),
            handler: 'CacheFirst',
            options: {
              cacheName: 'quick-canvas-image-cache',
              cacheableResponse: {
                statuses: [200, 304]
              },
              expiration: {
                maxAgeSeconds: 7 * 24 * 60 * 60, // 7天
                maxEntries: 100, // 最多缓存100张图片
                purgeOnQuotaError: true
              }
            }
          }
        ],
        // 安装阶段配置
        skipWaiting: true,
        // 激活阶段配置
        clientsClaim: true,
        // 自定义服务工作线程代码
        additionalManifestEntries: [
          // 可以在这里添加额外的资源到预缓存清单
        ]
      },
      // 离线fallback处理
      additionalManifestEntries: [
        {
          url: '/offline-fallback.html', // 可以创建一个离线提示页面
          revision: '1.0.0'
        }
      ],
      // PWA应用元数据
      manifest: {
        name: 'Quick-Canvas 轻量 Web 白板',
        short_name: 'Quick-Canvas',
        start_url: '/',
        display: 'standalone',
        background_color: '#ffffff',
        theme_color: '#4c95e9',
        icons: [
          {
            src: 'icon-192x192.png',
            sizes: '192x192',
            type: 'image/png',
            purpose: 'any maskable'
          },
          {
            src: 'icon-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  }
})



// 新增PWA插件配置（注入模式版本，没成功）
// VitePWA({
//   mode: 'production',  // 仅在生产环境生效
//   registerType: 'autoUpdate',  // 自动更新
//   strategies: 'injectManifest', // 注入模式
//   injectManifest: {
//     swSrc: path.resolve(__dirname, 'src/service-worker.js'), // SW 源码路径（后续创建）
//     swDest: path.resolve(__dirname, 'dist/service-worker.js'), // 构建后输出路径
//   },
//   // PWA应用元数据（桌面快捷方式、启动页）
//   manifest: {
//     name: 'Quick-Canvas 轻量 Web 白板', // 应用全称
//     short_name: 'Quick-Canvas', // 桌面快捷方式名称
//     start_url: '/', // 启动页（项目根路径）
//     display: 'standalone', // 独立窗口模式（类似原生 App）
//     background_color: '#ffffff', // 启动屏背景色（匹配项目主题）
//     theme_color: '#4c95e9', // 主题色（匹配你的项目主色，如按钮色）
//     icons: [
//       // 应用图标缓存
//       {
//         src: 'icon-192x192.png',
//         sizes: '192x192',
//         type: 'image/png',
//         purpose: 'any maskable' // 适配安卓面具图标
//       },
//       {
//         src: 'icon-512x512.png',
//         sizes: '512x512',
//         type: 'image/png'
//       }
//     ]
//   }
// })
